You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
70 lines
1.8 KiB
70 lines
1.8 KiB
|
|
|
|
<template>
|
|
<div>
|
|
<div class="header-height"></div>
|
|
<div class="w-1200 py-8 nav">
|
|
<NBreadcrumb>
|
|
<NBreadcrumbItem>
|
|
<NuxtLink :to="localePath('/')">{{ $t('homePage') }}</NuxtLink>
|
|
</NBreadcrumbItem>
|
|
<NBreadcrumbItem>
|
|
<NuxtLink :to="localePath('/news')">{{ $t('africanVideo') }}</NuxtLink>
|
|
</NBreadcrumbItem>
|
|
<NBreadcrumbItem>
|
|
<p>{{ locale == 'zh' ? articleData.title : articleData.titleEn}}</p>
|
|
</NBreadcrumbItem>
|
|
</NBreadcrumb>
|
|
</div>
|
|
<div class="w-1200 py-8">
|
|
<p class="title">{{ locale == 'zh' ? articleData.title : articleData.titleEn}}</p>
|
|
<NSpace class="article-footer">
|
|
<span class="">{{dayjs(articleData.createTime).format('YYYY-MM-DD')}}</span>
|
|
<!-- <span class="">{{$t('source')}}：{{locale== 'zh'? articleData.source: articleData.sourceEn}}</span>-->
|
|
|
|
<span class="flex items-center"><NIcon :component="EyeOutline" size="20px"></NIcon> {{articleData.viewsCount}} {{$t('viewsCount')}}</span>
|
|
</NSpace>
|
|
<video class="video" controls :src="articleData.videoUrl">
|
|
|
|
</video>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import {NBreadcrumb, NBreadcrumbItem, NSpace,NIcon} from "naive-ui";
|
|
import {getVideo} from "~/api/video";
|
|
const dayjs = useDayjs()
|
|
const {locale} = useI18n()
|
|
const localePath = useLocalePath()
|
|
|
|
import {EyeOutline} from '@vicons/ionicons5'
|
|
const router = useRoute()
|
|
const articleData = ref<any>({
|
|
title: '',
|
|
titleEn: '',
|
|
content: '',
|
|
contentEn: '',
|
|
viewsCount: 0,
|
|
source: '',
|
|
sourceEn: ''
|
|
})
|
|
|
|
getVideo({
|
|
id: router.params.id
|
|
}).then( (res: any) => {
|
|
articleData.value = res
|
|
})
|
|
</script>
|
|
<style scoped>
|
|
.title{
|
|
color: rgba(16, 16, 16, 1);
|
|
font-size: 36px;
|
|
font-weight: bold;
|
|
margin-bottom: 20px;
|
|
}
|
|
.article-footer{
|
|
color: #9A9A9A;
|
|
font-size: 14px;
|
|
margin-bottom: 40px;
|
|
}
|
|
</style>
|